<%@page contentType="text/html" pageEncoding="UTF-8" import="java.io.*, java.sql.*, javax.sql.*, org.brickred.socialauth.*"%>
<%
    Cookie cookies[] = request.getCookies();
    Cookie myCookie = null;
    String cookieUid = "uid";

    if (cookies != null) {
        for (int i = 0; i < cookies.length; i++) {
            // out.println(cookies[i].getName() + "--- " + cookies[i].getValue() + "<br/>");
            if (cookies[i].getName().equals(cookieUid)) {
                myCookie = cookies[i];
                break;
            }

        }
    }
    String uid = null;
    String loginAccount = null;
    if (session.getAttribute("uid") == null) {
        SocialAuthManager manager = (SocialAuthManager) session.getAttribute("authManager");
        try {
            if (manager != null) {
                java.util.Map<String, String> paramsMap = org.brickred.socialauth.util.SocialAuthUtil.getRequestParametersMap(request);
                AuthProvider provider = manager.connect(paramsMap);
                if (provider != null) {
                    Profile p = provider.getUserProfile();
                    if (p != null && p.getEmail() != null) {
                        uid = p.getEmail();
                    } else {
                        uid = p.getFullName() + p.getDisplayName();
                    }
                }
            }
        } catch (Exception e) {
            e.printStackTrace();
        }
        loginAccount = uid;
    }

    if (uid != null) {
        session.setAttribute("uid", uid);
    } else {
        if (myCookie != null) {
            uid = myCookie.getValue();
            session.setAttribute("uid", uid);
        } else {
            uid = request.getRemoteHost();
            session.setAttribute("uid", uid);
        }
    }
    //out.println("uid=" + uid);
    Cookie cookie = new Cookie("uid", session.getAttribute("uid").toString());
    cookie.setMaxAge(365 * 24 * 60 * 60);
    response.addCookie(cookie);
%>
<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title> Chinese Word Lists  </title>
        <link rel="stylesheet" type="text/css" href="css/wordlist.css"/> 
        <link rel="stylesheet" type="text/css" href="css/button.css"/> 
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
        <script type="text/javascript" src="js/jquery.cookie.js"></script>
        <script type="text/javascript" src="js/jquery.limit.js"></script>
        <script type="text/javascript" src="js/wordlist.js"></script>
        <script type="text/javascript">
            $.ajaxSetup({
                contentType: 'application/x-www-form-urlencoded; charset=UTF-8'
            });

            var _gaq = _gaq || [];
            _gaq.push(['_setAccount', 'UA-9033082-1']);
            _gaq.push(['_trackPageview']);

            (function() {
                var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
                ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
                var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
            })();

        </script>
        <script type="text/javascript">
            $(document).ready(function() {
                $('#upload').limit('1000','#charsLeft');
                $('#note').limit('1000','#charsLeft');
                $.get("retrieve.jsp", {listName: $.cookie("currentWordList")}, function(data) {
                    // alert(data);
                    $("#wordlist").html(data);
                });   
                retrieveMyList();
                retrieveRecordLink();
                $("#listname").focus(function() {
                    var $this = $(this);
                    $this.select();

                    // Work around Chrome's little problem
                    $this.mouseup(function() {
                        // Prevent further mouseup intervention
                        $this.unbind("mouseup");
                        return false;
                    });
                });
            });
            
            if (typeof window.addEventListener != 'undefined')  {
                window.addEventListener('message', receiver, false);
            }
            function receiver(e) {
                //alert(e.data);
                //$("#record").html(e.data);
                if (e.data.substring(0,4)=='http') {
                    var link = e.data;
                    if (link.indexOf("http://vocaroo.com/") ==0 ) {
                        var listName  = $.cookie("currentWordList");
                        if (listName.length==0) listName= $.trim($('#listname').val());
                        $.get("saveRecordLink.jsp", {
                            link: link,
                            listName: listName
                        }, function (data) {
                            $("#recordFrame").hide();
                            retrieveRecordLink();
                            
                        }
              
                    );
                    }
                  
 
                }
            }
        </script>
         
    </head>
    <body>
        <div class="wrapper">
             <div style="float:right"><img id='k' width="400" height="250" src="/pics/k.jpg" /> </div>
            <div id="fb-root"></div>
            <script>(function(d, s, id) {
                var js, fjs = d.getElementsByTagName(s)[0];
                if (d.getElementById(id)) return;
                js = d.createElement(s); js.id = id;
                js.src = "//connect.facebook.net/en_US/all.js#xfbml=1&appId=395273910509570";
                fjs.parentNode.insertBefore(js, fjs);
            }(document, 'script', 'facebook-jssdk'));
            </script>
            <div>
                <div class="topmenu" style="background-color: black"> <a href="/wordlist"> Wordlist </a> <a href="/wordlist_chinese"> ChineseWordlist </a>  <a href="/youaudio"> YouAudio </a>  </div>
                <h2 align="center"> 中文生字词表 (Chinese Word Lists ) </h2>
                <div style="float:right" class="fb-like" data-href="http://www.elookinto.com/wordlist" data-send="true" data-width="250" data-show-faces="true"></div>

                <!--
              <div><object id="test" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" 
                           codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=10,0,0,0" width="15" height="15"><PARAM NAME=movie VALUE="http://www.strangecube.com/audioplay/online/audioplay.swf?file=http://onelook.com/pronounce/macmillan/US/word-American-English-pronunciation.mp3&auto=no&sendstop=yes&repeat=1&buttondir=http://www.strangecube.com/audioplay/online/alpha_buttons/negative_small&bgcolor=0xffffff&mode=playpause"><PARAM NAME="allowScriptAccess" value="always" /> <PARAM NAME=quality VALUE=high><PARAM NAME=wmode VALUE=transparent><PARAM NAME=einterface VALUE=yes><embed einterface="yes" allowScriptAccess="always" name="test" 
                                                                                                                                                                                        src="http://www.strangecube.com/audioplay/online/audioplay.swf?file=http://onelook.com/pronounce/macmillan/US/word-American-English-pronunciation.mp3&auto=no&sendstop=yes&repeat=1&buttondir=http://www.strangecube.com/audioplay/online/alpha_buttons/negative_small&bgcolor=0xffffff&mode=playpause&einterface=yes"
                                                                                                                                                                                        quality=high wmode=transparent width="15" height="15" align="" TYPE="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer"></embed></object></div>
        
                <button onclick="play1('connection')"> test </button>
                -->

                <div style="text-align: center">

                    <%
                        for (int i = 0; i <= 6; i++) {
                    %>
                    <a style="margin-left:5px;text-decoration: none;font-weight: bold;background: lightgray" href="javascript:void(0)"  onclick="retrieveGradeList(<%=i%>)"> Grade <%= i%> </a>
                    <% }%>

                </div>
                <div id="gradeList" style="text-align: center;background-color:lightblue"> </div>
                <div width="100%" id="myWordList" style="text-align: center;background:lavenderblush">

                </div>
                <div style="text-align: center">
                    <%
                        if (uid.equals(request.getRemoteHost())) {%>

                    Create my own lists with profile from that can be accessed from anywhere: 
                    <a href="facebook.jsp"><img  src="http://opensource.brickred.com/socialauthdemo/images/facebook_icon.png" /></a>
                    <a href="yahoo.jsp"><img  src="http://opensource.brickred.com/socialauthdemo/images/yahoomail_icon.jpg" /></a>
                    <a href="twitter.jsp"><img src="http://opensource.brickred.com/socialauthdemo/images/twitter_icon.png" /></a>

                    <%} else {%>
                    <a href="logout.jsp"> logout </a>
                    <%}%>
                </div>
                <div id="inputarea" style="display:none;vertical-align:text-top;width:100%" >
                    <table>
                        <tr> <td>
                                Type/Paste Words to the blow box to be saved:<br/> <textarea  id="upload" cols="80" rows="10"> </textarea>
                            </td>

                            <td>
                                Notes:<br/> <textarea  id="note" cols="80" rows="10"> </textarea>
                            </td>
                        </tr>
                    </table>


                    List Name: <input   size="45" maxlength="65" id="listname" type="text" />
                </div>

                <button id="b" onclick="upload(this)"> Upload words </button>  Input the term with quotes (for example): "学生" 我 <br/>
                <button id="recordButton" onclick="record(this)"> Make Your Own Audio  </button> <span id="recordText">  Record your own audio in Chinese and show off here. </span>  <br/>
                <iframe id="recordFrame" style="display:none" src="http://vocaroo.com/?minimal" width="525" height="450" frameborder="0"></iframe>



                <div id="wordlist">

                </div>

                <div  style="width:100%;text-align: center; height: 400px" >
                    <div id="userAudio"> </div>
                    <hr/>
                    一片一片又一片 <br/>
                    两片三片四五片<br/>
                    六片七片八九片<br/>
                    落入水中看不见<br/>
                    <a href="http://tts.imtranslator.net/LPQA" target="audio"> audio </a>
                </div> 
                <div class="push"> </div>
            </div> 

            <div class='footer' style="width:100%;text-align:center">
                <a href="https://chrome.google.com/webstore/detail/demkilcilciablmnmbnnlknjnphcloae"> Install from Chrome Store </a> <br/>
                Copyright (c) 2012, elookinto.  <a style="text-decoration: none" href="https://groups.google.com/forum/?fromgroups#!forum/wordlists" target="support"> Support Forum </a>
            </div>
    </body>
</html>
